<script setup>

import useArticleStore from "@/stores/article/index.js";
import useLoginStore from "@/stores/user/index.js";
import {useRoute} from "vue-router";
import router from "@/router/index.js";

const articleStore = useArticleStore();
const loginStore = useLoginStore();

//定义user数据接收器
const props = defineProps({
  articleDetail: {
    type: Object,
    default: () => ({})
  }
});


//点赞
const loveBtn = async () => {
  //判断是否登录
  if (!loginStore.token) {
    //先登录
    //弹出弹窗登录窗口
    loginStore.isShow = true
    //重定向到首页
    await router.push("/home")
    return;
  }
  await articleStore.loveArticleInfo(props.articleDetail.id)
  //加载详情
  await articleStore.getDetailNews(props.articleDetail.id)

}

//取消点赞
const cancelLoveBtn = async () => {
  await articleStore.closeLoveArticleInfo(props.articleDetail.id)
  //加载详情
  await articleStore.getDetailNews(props.articleDetail.id)
}

//收藏
const collectBtn = async () => {
  //判断是否登录
  if (!loginStore.token) {
    //先登录
    //弹出弹窗登录窗口
    loginStore.isShow = true
    //重定向到首页
    await router.push("/home")
    return;
  }
  await articleStore.collectArticleInfo(props.articleDetail.id)
  //加载详情
  await articleStore.getDetailNews(props.articleDetail.id)
}
//取消收藏
const cancelCollectBtn = async () => {
  await articleStore.closeCollectArticleInfo(props.articleDetail.id)
  //加载详情
  await articleStore.getDetailNews(props.articleDetail.id)
}



</script>

<template>
  <div class="lover-collect">
    <!--    点赞-->
    <div class="love">
  <span v-if="articleDetail.isLike===0" @click="loveBtn">
      <svg t="1738589620867" class="icon" viewBox="0 0 1024 1024"
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           p-id="9082" width="36" height="36"><path
          d="M939.358251 423.424662c-23.01825-37.252439-62.924121-60.779272-107.019409-63.209624-2.755764-0.38681-5.510504-0.579191-8.347109-0.579191l-152.202471-0.121773c6.649444-28.975938 10.015098-58.653865 10.015098-88.657202 0-28.223808-3.213181-57.139372-9.556657-85.952604-0.447185-2.043542-1.098008-4.006244-1.932002-5.866614-15.820314-57.302077-67.37755-96.841605-127.282918-96.841605-72.827679 0-132.081201 59.254545-132.081201 132.081201 0 3.334955 0.132006 6.66991 0.406253 10.015098-2.196015 57.211003-32.108279 109.947088-80.269162 141.363611-14.447037 9.42465-18.524912 28.773324-9.099239 43.220361 9.414417 14.437827 28.752858 18.535145 43.220361 9.099239 65.811892-42.925648 106.429984-115.325585 108.656699-193.684234 0.030699-1.332345-0.010233-2.663666-0.14224-3.996011-0.203638-2.012843-0.304945-4.016477-0.304945-6.019087 0-38.381146 31.233352-69.614497 69.614497-69.614497 32.57593 0 60.474326 22.204721 67.824735 53.997821 0.356111 1.534959 0.823761 3.019777 1.402953 4.453429 4.696975 22.814612 7.076162 45.579081 7.076162 67.743894 0 37.485753-6.222725 74.352405-18.494213 109.592001-3.324722 9.546424-1.819438 20.111037 4.02671 28.345582 5.856381 8.245801 15.332197 13.146415 25.448602 13.156648l193.226816 0.101307c1.423419 0.264013 2.857071 0.426719 4.300956 0.477884 24.116257 0.9967 45.935192 13.614066 58.603723 34.090423 7.838525 12.31242 11.438517 26.800389 10.431583 41.939181-0.080841 0.945535-0.121773 1.911536-0.11154 2.877537 0 0.854461 0.040932 1.697665 0.11154 2.53166 0.010233 0.335644-0.030699 0.661056-0.11154 0.976234-0.101307 0.376577-0.193405 0.772596-0.284479 1.159406l-74.972529 330.391802c-0.914836 1.281179-1.738597 2.6432-2.449795 4.046153-5.937223 11.762905-14.660908 21.48329-25.346271 28.172643-10.746762 6.812149-23.059182 10.614755-35.757388 11.06194-0.854461-0.061398-513.766226-0.224104-513.766226-0.224104-0.467651-0.020466-0.935302-0.030699-1.402953-0.030699 0 0-111.01542 0.172939-112.718201 0.457418-1.932002 0-3.446495-1.50426-3.446495-3.415796l0.299829-416.334173c0-1.901303 1.545192-3.446495 3.01466-3.456728l1.245364 0.121773c1.174756 0.132006 2.653433 0.284479 3.52836 0.193405l83.82822-0.222057 0 339.367221c0 17.253966 13.979386 31.233352 31.233352 31.233352s31.233352-13.979386 31.233352-31.233352L281.009092 435.350273c0-1.778506 0-8.631588 0-10.411117 0-17.253966-13.979386-30.928407-31.233352-30.928407-1.50426 0-117.547183 0.304945-119.402437 0.304945-36.34272 0-65.913199 29.566386-65.913199 65.893756l-0.299829 416.334173c0 36.337603 29.571503 65.902966 65.913199 65.902966 2.541893 0 111.406323-0.457418 111.406323-0.457418 0.457418 0.020466 0.925069 0.030699 1.382487 0.030699 0 0 511.458671 0.274246 512.505513 0.274246 25.469068 0 50.296523-7.197936 71.647807-20.73116 19.612687-12.281721 35.777855-29.881564 46.839795-50.967812 3.660366-5.622044 6.435573-11.875468 8.256034-18.615986 0.11154-0.416486 0.213871-0.823761 0.304945-1.240247l74.881454-330.340637c1.596358-6.212492 2.257413-12.586666 2.00261-18.992563C960.892707 473.366098 953.948551 446.331371 939.358251 423.424662z"
          fill="#999999" p-id="9083"></path><path
          d="M450.027553 518.650467c-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 30.470989c0 17.253966 13.979386 31.233352 31.233352 31.233352 17.253966 0 31.233352-13.979386 31.233352-31.233352l0-30.470989C481.260905 532.629853 467.281519 518.650467 450.027553 518.650467z"
          fill="#999999" p-id="9084"></path><path
          d="M693.805696 518.650467c-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 30.470989c0 17.253966 13.979386 31.233352 31.233352 31.233352 17.253966 0 31.233352-13.979386 31.233352-31.233352l0-30.470989C725.039048 532.629853 711.058638 518.650467 693.805696 518.650467z"
          fill="#999999" p-id="9085"></path><path
          d="M648.940882 660.09492c-14.304797-9.393951-33.592073-5.398964-43.159986 8.763594-0.132006 0.193405-13.614066 19.754926-34.171264 19.754926-19.98824 0-32.423457-18.09717-33.266661-19.368116-9.17087-14.427594-28.254507-18.809391-42.834574-9.770528-14.650675 9.109472-19.155269 28.366048-10.055007 43.016723 11.214413 18.047028 41.96988 48.588625 86.156242 48.588625 43.962258 0 75.104535-30.318516 86.572728-48.222281C667.404396 688.461991 663.216004 669.500127 648.940882 660.09492z"
          fill="#999999" p-id="9086"></path></svg>
  </span>

      <span @click="cancelLoveBtn" v-else>
        <svg t="1738683791942" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             p-id="4237" width="36" height="36"><path
            d="M896 384H716.8c30.72-133.12 20.48-235.52-25.6-296.96-40.96-56.32-97.28-61.44-102.4-61.44-35.84 0-97.28 10.24-107.52 97.28v15.36C481.28 256 337.92 358.4 296.96 384H97.28c-51.2 0-81.92 46.08-81.92 97.28l30.72 435.2c0 51.2 40.96 81.92 81.92 81.92h675.84c61.44 0 97.28-81.92 112.64-128 81.92-286.72 92.16-353.28 92.16-363.52 0-81.92-61.44-117.76-112.64-122.88z m-747.52 512l-25.6-409.6H256v409.6H148.48z"
            fill="#FF5A5F" p-id="4238"></path></svg>
      </span>
      <span style="margin-top: 4px; font-size: 12px">{{ articleDetail.likeCount === 0 ? "赞" : articleDetail.likeCount }}</span>
    </div>

<!--    &lt;!&ndash;    评论&ndash;&gt;-->
<!--    <div class="write" @click="commentBtn">-->
<!--    <span>-->
<!--      <svg t="1738589731277" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"-->
<!--           p-id="10239" width="26" height="26"><path-->
<!--          d="M157.568 751.296c-11.008-18.688-18.218667-31.221333-21.802667-37.909333A424.885333 424.885333 0 0 1 85.333333 512C85.333333 276.362667 276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667a424.778667 424.778667 0 0 1-219.125333-60.501334 2786.56 2786.56 0 0 0-20.053334-11.765333l-104.405333 28.48c-23.893333 6.506667-45.802667-15.413333-39.285333-39.296l28.437333-104.288z m65.301333 3.786667l-17.258666 63.306666 63.306666-17.258666a32 32 0 0 1 24.522667 3.210666 4515.84 4515.84 0 0 1 32.352 18.944A360.789333 360.789333 0 0 0 512 874.666667c200.298667 0 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333 149.333333 311.701333 149.333333 512c0 60.586667 14.848 118.954667 42.826667 171.136 3.712 6.912 12.928 22.826667 27.370667 47.232a32 32 0 0 1 3.338666 24.714667z m145.994667-70.773334a32 32 0 1 1 40.917333-49.205333A159.189333 159.189333 0 0 0 512 672c37.888 0 73.674667-13.173333 102.186667-36.885333a32 32 0 0 1 40.917333 49.216A223.178667 223.178667 0 0 1 512 736a223.178667 223.178667 0 0 1-143.136-51.690667z"-->
<!--          fill="#000000" p-id="10240"></path></svg>-->
<!--    </span>-->
<!--      <span>评论</span>-->
<!--    </div>-->
    <!--    收藏-->
    <div class="collect">
    <span @click="collectBtn" v-if="articleDetail.isCollect===0">
      <svg t="1738589821429" class="icon" viewBox="0 0 1024 1024" version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           p-id="11284" width="36" height="36"><path
          d="M813.4 1000.2c-3.9 0-7.7-0.9-11.3-2.8L513.2 845.5 224.3 997.4c-8.2 4.3-18.1 3.6-25.6-1.8s-11.2-14.6-9.7-23.8l55.2-321.7L10.5 422.3c-6.6-6.5-9-16.1-6.1-24.9 2.9-8.8 10.5-15.2 19.6-16.5L347 334 491.4 41.3c8.2-16.6 35.4-16.6 43.6 0l79.4 161c5.9 12 1 26.6-11 32.5-12 5.9-26.6 1-32.5-11L513.2 107 384.9 367c-3.5 7.2-10.4 12.1-18.3 13.3L79.7 421.9l207.6 202.4c5.7 5.6 8.3 13.6 7 21.5l-49 285.8 256.6-134.9c7.1-3.7 15.5-3.7 22.6 0l256.6 134.9-49-285.8c-1.3-7.9 1.3-15.9 7-21.5l207.6-202.4-286.9-41.7c-13.3-1.9-22.5-14.3-20.6-27.5 1.9-13.3 14.3-22.5 27.5-20.6l335.6 48.8c9.2 1.3 16.8 7.7 19.6 16.5 2.9 8.8 0.5 18.4-6.1 24.9L782.2 650.1l55.2 321.7c1.6 9.1-2.2 18.3-9.7 23.8-4.3 3-9.3 4.6-14.3 4.6z"
          fill="#999999" p-id="11285"></path></svg>
    </span>
      <span v-else @click="cancelCollectBtn">
         <svg t="1738683871063" class="icon" viewBox="0 0 1131 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5379" width="36" height="36"><path
             d="M565.89902 840.900662l-349.760424 182.990835L291.168636 651.019868 0 391.100185l396.037086-47.361695L565.89902 0l169.75343 343.73849 396.037086 47.361695L840.520901 651.019868l75.030039 372.980132z"
             fill="#F8D415" p-id="5380"></path></svg>
      </span>

      <span class="write" style="margin-top: 4px; font-size: 12px">{{ articleDetail.collectCount === 0 ? "收藏" : articleDetail.collectCount }}</span>
    </div>


  </div>
</template>

<style scoped lang="less">
.lover-collect {
  position: fixed;
  left: 1%;
  display: flex;
  flex-direction: column;

  .love, .write, .collect {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    cursor: pointer;
  }

  span {
    font-size: 12px;
  }
}
</style>